<title>用户列表</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>用户</cite></a>
    <a><cite>用户列表</cite></a>
  </div>
</div>
<div class="layui-fluid ">
  <div class="layui-card">
    <div class="layui-btn-group layui-card-header">
      <button class="layui-btn layui-btn-primary layui-btn-sm" lay-href="user/user/add">新增用户</button>
    </div>
    <table id="user-list" lay-filter="user-list"></table>
  </div>
</div>

<style type="text/css">
  .avatar {
      width:38px;
  }
</style>
<script type="text/html" id="barDemo">
  <a lay-href="user/user/view/id={{d.id}}" class="layui-btn layui-btn-primary layui-btn-xs">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>
layui.use(['admin', 'table', 'flow'], function(){
    var $       = layui.$,
        admin   = layui.admin,
        element = layui.element,
        router  = layui.router(),
        table   = layui.table,
        setter  = layui.setter,
        request = setter.request,
        flow    = layui.flow,
        form    = layui.form,
        options = request.init({
          elem: '#user-list',
          url: setter.host + 'user',
          cellMinWidth: 80,
          cols: [[
            {type: 'checkbox'},
            {field:'id', title:'ID'},
            {field:'pic_url', title:'头像', width:68, templet: function(d) {
              return '<img class="avatar" lay-src="' + setter.IMG_DOMAIN + d.pic_url + '">';
            }},
            {field:'nickname', title:'用户名', templet: '#usernameTpl'},
            {field:'email', title:'邮箱'},
            {field:'created_at', title:'注册时间'},
            {field:'role', title:'角色'},
            {field:'sex', title:'性别', width:68, templet: function(d) {
              return d.sex == 'male' ? '男' : '女';
            }},
            {'title':'操作', toolbar:'#barDemo'}
          ]],
          done:function(d){
            flow.lazyimg({
              elem: '.avatar'
            });
          },
          page: true
        });
  
    table.render(options);

    // table.on('tool(user-list)', function(obj){
    //   var data = obj.data;
    //   if(obj.event === 'detail'){
    //     layer.msg('ID：'+ data.id + ' 的查看操作');
    //   } else  if(obj.event === 'edit'){
    //     layer.alert('编辑行：<br>'+ JSON.stringify(data))
    //   }
    // });
 // element.render();
  
  
});
</script>